import React from "react";
import styles from "@pages/home/widgets/news/styles/styles.module.less";
import { Link } from "react-router-dom";
import GeekIcon from "@shared/geekIcon";
import classNames from "classnames";
import dayjs from "dayjs";

interface Props {
    news: News;
}

export default function NewsItem({ news }: Props) {
    return (
        <li
            className={classNames({
                [styles.hasOnePicture]: news.cover.type === 1,
                [styles.hasMorePicture]: news.cover.type > 1,
            })}
        >
            <div className={styles.main}>
                <Link className={styles.title} to={"/"}>
                    {news.title}
                </Link>
                {news.cover.type >= 1 && (
                    <Link className={styles.imgContainer} to={"/"}>
                        {news.cover.images.map((imgUrl, index) => (
                            <img key={index} src={imgUrl} alt="" />
                        ))}
                    </Link>
                )}
            </div>
            <div className={styles.secondary}>
                <Link to={"/"} className={styles.meta}>
                    <span className={styles.item}>{news.aut_name}</span>
                    <span className={styles.item}>{news.comm_count}评论</span>
                    <span className={styles.item}>{dayjs().to(dayjs(news.pubdate))}</span>
                </Link>
                <GeekIcon type={"iconbtn_channel_close"} className={styles.close} />
            </div>
        </li>
    );
}